import React,{Component} from "react";
import {Form, Input,DatePicker,Select,Modal, message} from 'antd';
import moment from 'moment'; // 时间插件 
require("./UpdateArtical.css");

const dateFormat = 'YYYY-MM-DD'; // 定义你需要的时间格式
const { TextArea } = Input;
const FormItem = Form.Item;
class UpdateArtical extends Component{
    constructor(props){
        super(props);
        this.state={
            loading: false,
            modal: false,
            userSet: {

            },
            data:{},
            hints: {},
            validRules: [],
        }
    }


    init = (record) => {
        console.log(record)
        this.setState({
            data:record
        })
    }

    showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      hideModal = () => {
        this.setState({
          visible: false,
        });
      }

      handleChange01 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                title:e.target.value,
                content:this.state.data.content,
                author:this.state.data.author,
                type:this.state.data.type,
                sign:this.state.data.sign,
                createtime:this.state.data.createtime,
                updatetime:this.state.data.updatetime
            }
        })
      }

      handleChange02 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                title:this.state.data.title,
                content:e.target.value,
                author:this.state.data.author,
                type:this.state.data.type,
                sign:this.state.data.sign,
                createtime:this.state.data.createtime,
                updatetime:this.state.data.updatetime
            }
        })
      }

      handleChange03 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                title:this.state.data.title,
                content:this.state.data.content,
                author:e.target.value,
                type:this.state.data.type,
                sign:this.state.data.sign,
                createtime:this.state.data.createtime,
                updatetime:this.state.data.updatetime
            }
        })
      }

      handleChange04 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                title:this.state.data.title,
                content:this.state.data.content,
                author:this.state.data.author,
                type:e.target.value,
                sign:this.state.data.sign,
                createtime:this.state.data.createtime,
                updatetime:this.state.data.updatetime
            }  
        })
      }

      handleChange05 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                title:this.state.data.title,
                content:this.state.data.content,
                author:this.state.data.author,
                type:this.state.data.type,
                sign:e.target.value,
                createtime:this.state.data.createtime,
                updatetime:this.state.data.updatetime
            }
        })
      }

      //修改的操作
      handleOk=(e) => {
        this.setState({
          visible: false,
        });
        fetch('http://localhost:8007/artical/update', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state.data)
          }).then(res=> {
                message.success('修改成功')
                this.props.fetch();
          }).catch(e=>{
                this.setState({
                    visible:false
                })
                message.error('修改失败')
            });
      }

    render(){

        return (
            <div>
                <Modal
                    title="编辑文章"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                <Form layout="vertical">

                    <FormItem label="标题" className="formitem">
                        <Input  className="inputk" autoComplete="off" value={this.state.data.title} onChange={this.handleChange01}/>
                    </FormItem>

                    <FormItem label="内容" className="formitem">
                        <TextArea className="inputk" rows={4} value={this.state.data.content} onChange={this.handleChange02}/>
                    </FormItem>

                    <FormItem label="作者" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.author} autoComplete="off" onChange={this.handleChange03}/>
                    </FormItem>

                    <FormItem label="类型" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.type} autoComplete="off" onChange={this.handleChange04}/>
                    </FormItem>

                    <FormItem label="标记" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.sign} autoComplete="off" onChange={this.handleChange05}/>
                    </FormItem>

                    <FormItem label="创建日期" className="formitem">
                        <DatePicker className="inputk" value={moment(this.state.data.createtime, dateFormat)} disabled/>
                    </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

const UpdateForm = Form.create({withRef: true})(UpdateArtical);
export default UpdateForm;